import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import Example from '../../../examples/enable-column-resizing';
import RTLExample from '../../../examples/localization-i18n-fa';

<Head>
  <title>{'Column Resizing Guide - Material React Table V3 Docs'}</title>
  <meta
    name="description"
    content="How to use and customize the column resizing features of Material React Table"
  />
</Head>

## Column Resizing Feature Guide

Material React Table has a built-in column resizing draggable handle feature.

> The Column Size features was recently split into its own [Guide](/docs/guides/column-size). View that guide as a prerequisite to this one.

### Relevant Table Options

<TableOptionsTable
  onlyOptions={
    new Set([
      'columnResizeDirection',
      'columnResizeMode',
      'defaultColumn',
      'defaultDisplayColumn',
      'displayColumnDefOptions',
      'enableColumnResizing',
      'layoutMode',
      'onColumnSizingChange',
      'onColumnSizingInfoChange',
    ])
  }
/>

### Relevant Column Options

<ColumnOptionsTable
  onlyOptions={
    new Set(['enableResizing', 'grow', 'maxSize', 'minSize', 'size'])
  }
/>

### Relevant State

<StateOptionsTable
  onlyOptions={new Set(['columnSizing', 'columnSizingInfo'])}
/>

### Initial Column Sizes

Column sizes will behave differently depending on which `layoutMode` you have set.

See the [Column Size Guide](/docs/guides/column-size) for more information on layout modes and how to set initial column sizes properly for you use case.

### Enable Column Resizing Feature

`enableColumnResizing` is the boolean table option that enables the column resizing feature.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  enableColumnResizing: true,
});

return <MaterialReactTable table={table} />;
```

You can disable specific columns from being resizable by setting the `enableResizing` column option to false in their respective column definition.

### Column Resize Mode

The default `columnResizeMode` is `onChange` (in MRT versions v1.7+), which means that the column resizing will occur immediately as the user drags the column resize handle. If you are running into performance issues because of many other enabled features, you might want to set the `columnResizeMode` to `onEnd` instead. This will make the column resizing only occur after the user has finished dragging the column resize handle and released their mouse.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  enableColumnResizing: true,
  columnResizeMode: 'onEnd', //instead of the default "onChange" mode
});
```

<Example />

### Column Growing

> MRT V3 has a new "opposite" behavior in regards to column sizes when column resizing is enabled compared to MRT V3

When column resizing is enabled, by default, a layoutMode of `"grid-no-grow"` will be applied internally. This means that columns will have an absolute size and they will NOT grow to fill in the remaining space of the table. You can let columns grow to fill in the remaining space by changing the `layoutMode` back to `"grid"` or `"semantic"`.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  enableColumnResizing: true,
  layoutMode: 'grid', //instead of the default "grid-no-grow" when column resizing is enabled
});
```

Alternatively, if you only want certain columns to grow to fill the remaining space, you can set the `grow` column option to `true` in their respective column definitions.

```jsx
const columns = [
  //...
  {
    accessorKey: 'address',
    header: 'Address',
    size: 250,
    grow: true, //allow this column to grow to fill the remaining space
  },
];
```

This is discussed in more detail in the [Column Size Guide](/docs/guides/column-size#column-grow).

### Column Resize Direction

> New in V3.1

If you are displaying your table in a RTL (right-to-left) language, you can set the `columnResizeDirection` table option to `"rtl"` to make the column resize handle appear on the left side of the column instead of the right side. This may behave differently depending on which Emotion or MUI theme settings you have enabled.

If you have already set the proper `theme.direction` setting in your MUI theme, then this option will already have been set automatically for you, but you can still override it using the `columnResizeDirection` table option.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  enableColumnResizing: true,
  columnResizeDirection: 'rtl', //instead of the default "ltr" direction
});

return (
  <div style={{ direction: 'rtl' }}>
    {' '}
    {/* app-wide style? */}
    <MaterialReactTable table={table} />
  </div>
);
```

<RTLExample />

### Enable Resizing on Built-in Display Columns

As discussed further in the [Display Columns Guide](/docs/guides/display-columns), you can customize the options of the built-in columns that get generated under the hood by MRT by enabling certain features.

Here, we can enable column resizing on the built-in row numbers column by setting the `enableResizing` column option to true in the `displayColumnDefOptions` table option.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  displayColumnDefOptions: {
    'mrt-row-numbers': {
      enableResizing: true, //allow the row numbers column to be resized
      size: 40,
      grow: false, //new in v2.8 - do not fill remaining space using this column
    },
  },
  enableRowNumbers: true,
  layoutMode: 'grid', // `grow` only works in the grid* layout modes
});

return <MaterialReactTable table={table} />;
```

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-column-resizing-examples)**
